<template>
  <div class="search-index">
      <Header></Header>
      <section>
        <div class="search-history" v-if="searchArr.length"> 
            <h2>
                <i><van-icon name="clock-o" /></i>
                <span>历史搜索</span>
                <span @click="deleteStorage">清空历史记录</span>
             </h2>
            <ul>
                <li 
                v-for="(item,index) in searchArr"
                :key="index" @click="goSearchList">{{item}}</li>
                <!-- <li>猫砂盆</li>
                <li>盘子</li> -->
            </ul>
        </div>
        <div v-else>
            暂无搜索记录...
        </div>
        </section>
        <Tabbar></Tabbar>
      </div>  
</template>

<script>
import Header from "@/components/search/Header.vue"
import Tabbar from '@/components/common/Tabbar.vue'
import Vue from 'vue';
import { Icon } from 'vant';
import { Dialog } from 'vant';

// 全局注册
Vue.use(Dialog);

Vue.use(Icon);
export default {
    data(){
        return{
            searchArr:[]
        }
    },
    components:{
       
       Tabbar,
       Header,
       
     
       
   },
   created(){
       this.searchArr=JSON.parse(localStorage.getItem('searchList')) || [];

   },
   methods:{
       goSearchList(){
           this.$router.push({
               name:'list',
              
           })
       },
       deleteStorage(){
       Dialog.confirm({
  title: '',
  message: '确认清空历史记录吗',
})
  .then(res => {
      console.log(res);
       if(res=='confirm'){
           //删除本地存储
           localStorage.removeItem('searchList');
           //清除数据
           this.searchArr=[];

       }
    
  })
  .catch(() => {
   
  });
   }
       
   }
}
</script>

<style scoped>
.search-index{
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}
section{
    flex: 1;
    overflow: hidden;
    background-color:#f5f5f5;
}
/* .search-history
{


} */
.search-history h2{
    padding: 10px;
    font-weight: 400;
    font-size: 14px;
    color: rgb(183, 180, 134);
    position: relative;

}
.search-history h2 span:last-child{
position: absolute;
right: 5px;


}
.search-history h2 i{
    padding-right: 3px;
    color: rgb(183, 180, 134);
}
.search-history ul{
    display: flex;
    flex-wrap: wrap;
padding: 5px 5px;
}
.search-history ul li{
    /* width: 56px; */
    margin: 6px;
    padding: 3px 6px;
    font-size: 12px;
    border: 1px solid rgb(183, 180, 134);
    border-radius:8px ;
    color:rgb(183, 180, 134) ;

    
}
</style>
